<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div class="bread" v-if="parameter.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ parameter.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header">
          <el-form :inline="true" :model="searchData" class="demo-form-inline">
            <el-form-item label="目录名称">
              <el-input
                v-model="searchData.directoryName"
                placeholder="目录名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchData.state" placeholder="请选择">
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item class="suc">
              <el-button
                icon="el-icon-back"
                type="text"
                style="margin-right: "
                v-if="parameter.id"
                @click="$router.back()"
                >返回学科</el-button
              >
              <el-button icon="el-icon-edit" type="success" @click="handleAdd"
                >新增目录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <!-- 提示 -->
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          show-icon
          :closable="false"
        ></el-alert>
        <!-- 列表 -->
        <el-table
          :data="tableData"
          style="width: 100%; margin-top: 20px;boder-bottom=2px solid #ccc"
          :header-cell-style="{ background: '#fafafa',
          'border-bottom':'2px solid #e8e8e8'

           }"

        >
          <el-table-column prop="id" type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              {{ formatTime(row.addDate, "YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{ status(row.state) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="toggleState(row)">{{
                row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                @click="updateList(row)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="delFn(row.id)"
                :disabled="row.state === 1 || row.totals > 0"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          :current-page="formData.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="formData.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="float: right; margin-top: 20px; margin-bottom: 20px"
          background
        />
      </el-card>
      <!-- 弹框 -->
      <el-dialog
        :visible="showDialog"
        :title="title"
        @close="handleClose"
        width="400px"
      >
        <!-- 表单内容 -->
        <el-form
          :rules="rules"
          label-width="100px"
          ref="formRef"
          :model="formData"
        >
          <el-form-item label="所属学科" prop="subjectID" v-if="!parameter.id">
            <el-select v-model="formData.subjectID" style="width: 100%">
              <el-option
                v-for="item in subjectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input v-model="formData.directoryName" />
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="confirm(rowId)">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
import {
  list as getList,
  add,
  remove,
  changeState,
  update
  // detail
} from '@/api/hmmm/directorys.js'
import { simple as subjectList } from '@/api/hmmm/subjects.js'

import dayjs from 'dayjs'

export default {
  data () {
    return {
      formData: {
        state: '',
        page: 1,
        pagesize: 10
      },
      searchData: {
        directoryName: '',
        subjectID: ''
      },

      rules: {
        subjectID: [
          {
            type: 'number',
            message: '请选择所属学科',
            trigger: ['blur', 'change'],
            required: true
          }
        ],
        directoryName: [
          {
            required: true,
            message: '请输入目录名称',
            trigger: ['blur', 'change']
          }
        ]
      },
      tableData: [],
      showDialog: false,
      total: 0,

      subjectOptions: [],
      title: '',
      rowId: ''
      // showLink: false
    }
  },

  async created () {
    getCompanys()
    getQuestion()
    const { data: subjectItems } = await subjectList()
    // console.log(subjectItems)
    this.subjectOptions = subjectItems
    // console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
    if (this.$route.query.id) {
      // console.log('yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy')
      // this.showLink = true
      // const { data } = await detail({ id: this.$route.query.id })
      this.searchData.subjectID = +this.$route.query.id
      // this.searchData.directoryName = this.parameter.name
      this.search()

      // console.log(data, '2222222222222222222222222222222')
      // this.tableData = data.items
      // this.total = data.counts
      // console.log(this.$route.query)

      // this.searchData = { ...this.$route.query }
    } else {
      this.getList()
    }
    // console.log(this.$route, '路由')
  },
  computed: {
    parameter () {
      return this.$route.query || {}
    }
  },
  methods: {
    async getList () {
      const { data } = await getList({
        subjectID: this.$route.query.id || null,
        page: this.formData.page,
        pagesize: this.formData.pagesize
      })
      // console.log(data, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
      this.tableData = data.items
      this.total = data.counts
    },
    formatTime (time, str) {
      return dayjs(time).format(str)
    },
    status (num) {
      if (num === 1) {
        return '已启用'
      } else {
        return '已禁用'
      }
    },
    handleAdd () {
      this.showDialog = true
      this.title = '新增目录'
    },
    confirm (id) {
      this.$refs.formRef.validate(async (boo) => {
        if (!boo) return
        if (id) {
          await update(this.formData)
          this.$message.success('修改目录成功')
          this.handleClose()
          this.getList()
        } else {
          if (this.$route.query.id) {
            await add({ directoryName: this.formData.directoryName, subjectID: +this.$route.query.id })
            // const { data } = await getList({ id: this.$route.query.id })
            // console.log(data, '1111')
            // this.tableData = data.items
            this.formData.page = 1
            this.getList()
          } else {
            await add(this.formData)
            this.formData.page = 1
            this.getList()
          }
          this.handleClose()
          this.$message.success('新增成功')
        }

        // this.getList()
      })
    },

    handleClose () {
      this.showDialog = false
      this.$refs.formRef.resetFields()
      this.formData = {
        subjectID: '',
        directoryName: ''
      }
      this.rowId = ''
    },
    handleSizeChange (val) {
      this.formData.pagesize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.formData.page = val
      this.getList()
    },
    delFn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({
            id: id
          })
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async toggleState (row) {
      // console.log(row)

      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1
    },
    updateList (row) {
      this.showDialog = true
      // await update({id: this.row.id })
      this.rowId = row.id

      this.formData = { ...row }
      this.title = '修改目录'
    },
    // 清除筛选条件
    clear () {
      this.searchData = {
        directoryName: null,
        state: null
      }
      this.getList()
    },
    // 进行筛选
    async search () {
      this.formData.page = 1
      console.log(
        this.searchData
        // 'asssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
      )

      const { data } = await getList({
        ...this.searchData,
        page: this.formData.page,
        pagesize: this.formData.pagesize
      })
      // console.log(data, '666666666666666666666666666666666666666666666666')
      this.tableData = data.items
      this.total = data.counts
      // this.getList(this.searchData)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-breadcrumb {
    height: 30px;
    border-bottom: 1px solid #f4f4f5;
    margin-bottom: 10px;
  }

}

.dir1 {
  margin-right: 50px;
}
.suc {
  float: right;
}
.header {
  padding-top: 11px;
  padding-left: 10px;
}
.text {
  font-size: 14px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
